import React, {Component} from 'react';
import SimpleSelect from "./simpleSelect";
import Start from "./help/Start";
import Stop from "./help/stop";
import DiscreteSlider from "./help/DiscreteSlider";
import SimpleSelectForAlgorithm from "./SimpleSelectForAlgorithm";
import "bootstrap/dist/js/bootstrap.bundle"
import "bootstrap/dist/css/bootstrap.css"
import $ from "jquery"
import "jquery-ui/jquery-ui"
import Input from "./help/Input";
import Input2 from "./help/inputOne";


const textAreaInput = "4 5\n" +
    "0 1 4\n" +
    "1 2 5\n" +
    "2 3 17\n" +
    "1 3 10\n" +
    "2 1 5";

const p_0 = "Note:";
const p_1 = ">> Line 1: input the number of vertices and edges seperated by a space.";
const p_2 = ">> Line edges: input start, end and positive weight seperated by a space.";

const p_3 = ">> All inputs should be positive integers under 100.";

const generateNumber = (start, end) => {
    let items = [];
    for (let i = start; i <= end; i++) {
        items.push(i);
    }
    return items;
}
class Menu extends Component {
    generateN = (n) => {
        let a = []
        for (let i = 0; i < n; i++) {
            a.push(i);
        }
        return a;
    }


    componentDidMount = () => {
            $(function(){
        $(".modal-dialog").draggable({cancel : '.modal-body'});
        // $(".modal-dialog").draggable({cancel : '.btn'});
    });
    };

    // 获取输入
    getInput = () => {
        return <React.Fragment>
                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                <Input2
                    id={"key"}
                    label={"Key"}
                />
            </div>
                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                <Input
                    id={"array"}
                    label={"Array"}
                />
            </div>
            </React.Fragment>;
    }


    render = () => {
        return (
            <div className="container-fluid" id="menu">
<div className="row">
            <div className="w-100 d-flex  flex-wrap">
                <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-success" style={{whiteSpace: "nowrap"}}
                          id="newRandomGraphButton" onClick={this.props.onGenerate}>Generate
                  </button>
                </div>

                {this.getInput()}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <SimpleSelectForAlgorithm
                        pos={0}
                        label={'Algorithm'}
                        items={['Sequential Search', 'Binary Search', 'Hash Search']}
                        onValueChanged={this.props.setAlgo}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Start
                        select = {this.props.select}
                    onStart={this.props.onStart}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Stop
                    onReset={this.props.onReset}
                    />
                </div>

            </div>
</div>
                </div>
        );
    }
    isClickable = () =>
        {
            if (this.props.disable) {
                return {cursor: "not-allowed"};
            } else {
                return {};
            }
        }
    }


    export default Menu;